import React, { useRef, useEffect, useState } from "react";



const Test = (props, { number }) => {
    //接受父组件传递的值
    // const [number, setNumber] = useState(props.number); //只有初始化时执行赋值
    //子组件的值
    const [count, setCount] = useState(0)

    useEffect(() => {
        console.log(props.number)
    }) //所有更新都会执行

    useEffect(() => {
        console.log(props)
    }, []) //仅在挂载和卸载的时候执行

    useEffect(() => {
        console.log(count)
    }, [count]) //仅在 count更改时执行

    const changeCount = () => {
        setCount(count + 1)
    }

    // 父组件传递的props发生改变时，会重新渲染的只有render，所以用props.number可以获取到最新的值
    // 父组件更新时,若想更新number，则需要useEffect
    return <div>
        数字：{props.number.count}-{number}

        <div>
            {count}
            <button onClick={changeCount}>改变子组件的值</button>
        </div>
    </div>

}
export default Test

